.conter {
  width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  .formula {
    height: 60px;
    margin: 10px;
    border-radius: 5px;
    display: flex;
    .mula {
      width: 100%;
      display: flex;
      input {
        width: 100%;
        height: 80%;
        margin: 3px;
        text-align: center;
        outline: none;
        font-size: 24px;
      }
      select {
        border: 0;
        outline: none;
        width: 150px;
        font-size: 24px;
        option {
          font-size: 16px;
        }
      }
    }
    div:nth-child(2) {
      width: 20%;
      text-align: center;
      line-height: 60px;
    }
    .result {
      width: 20%;
      text-align: center;
      line-height: 60px;
      font-size: 24px;
      border: 1px solid black;
      margin: 3px 10px;
      box-sizing: border-box;
      overflow: hidden;
      outline: none;
    }
  }
  .process {
    width: 100%;
    height: 300px;
    border-radius: 5px;
    padding-top: 50px;
    .con {
      width: 120px;
      height: 90px;
      margin: auto;
      .addsub {
        width: 100%;
        height: 100%;
        > div {
          width: 100%;
          height: 50px;
          display: flex;
          > div {
            flex: 1;
            text-align: center;
            line-height: 50px;
            position: relative;
            .f1-bor,
            .f2-carryh,
            .f2-carryd {
              width: 20px !important;
              height: 30px;
              position: absolute;
            }
          }
        }
        .f1 .f1-decade {
          div {
            width: 30px;
          }
          .f1-bor {
            top: -28px;
            left: 20%;
            font-size: 40px;
            color: darkorange;
          }
        }
        .f2 .f2-decade div {
          width: 30px;
        }
        .f2 .f2-hundreds .f2-carryh,
        .f2 .f2-decade .f2-carryd {
          bottom: 0;
          right: 0;
          font-size: 12px;
          color: darkorange;
        }
        .f4 > div .f4-carryk,
        .f4 > div .f4-carryh {
          width: 20px;
          height: 30px;
          position: absolute;
          bottom: 0;
          right: 0;
          font-size: 12px;
          color: darkorange;
        }
        .f4 > div .f4-carryh-z {
          width: 20px;
          height: 30px;
          position: absolute;
          top: -20px;
          right: 0;
          font-size: 12px;
          color: darkorange;
        }
        .f5,
        .f3 {
          border-top: 1px solid black;
        }
      }
    }
  }
}
